var scene, camera, renderer, group, role, mixer;
var actionState = "";
var roleAnimations = [];
var timer = null;
var ASSETSURL = "../assets/04/"; // 资源主目录路径
var clock = new THREE.Clock();
var w = window.innerWidth,
  h = window.innerHeight;
(function () {
  initVariable();
  addLight();
  loadModel(addTimer);
  loop();
  // new THREE.OrbitControls(camera, renderer.domElement);
})();

function addTimer() {
  gsap.registerPlugin(ScrollTrigger);
  timer = new gsap.timeline({
    onUpdate: function () {
      // update();
    },
    scrollTrigger: {
      trigger: ".app",
      scrub: true,
      // markers: true,
      start: "start start",
      end: "bottom bottom",
    },
    defaults: { duration: 0},
  });
  timer.to(".part1-a", { duration: 0, opacity: 0, y: "+=20" }, 4);
  timer.to(role.position, { duration: 2, x: -200, y: 0, z: 0 }, 1);
  timer.to(role.rotation, { duration: 2, x: 0, y: 0, z: 0 }, 1.5);

  timer.to(role.rotation, { duration: 3, x: 0, y: toAngle(45), z: 0 }, 2);

  timer.to(role.position, { duration: 3.5, x: 0, y: 100, z: 0 }, 3);
  timer.to(
    role.rotation,
    { duration: 3, x: toAngle(90), y: toAngle(0), z: toAngle(18)},
    4
  );

  timer.to(role.position, { duration: 4, x: 0, y: -100, z: 200,}, 5);
  timer.to(
    role.rotation,
    {
      duration: 4, x: toAngle(0), y: toAngle(0), z: toAngle(0)
    }, "+=10"
  );
  timer.to(
    role.rotation,
    { duration: 16, x: toAngle(0), y: toAngle(90), z: toAngle(0)},
    "+=1"
  );
  timer.to(role.position, { duration: 16, x: -100, y: -100, z: 200 }, "+=16");
  timer.to(".part5-a", { duration: 0.5, opacity: 1, y: "-=80" }, "+=0.5");
  timer.to(".part5-b", { duration: 1, opacity: 1, y: "-=80" }, "+=0.5");
  timer.to(".part5-c", { duration: 1.5, opacity: 1, y: "-=80" }, "+=0.5");
}

function toAngle(n) {
  return (Math.PI / 180) * n;
}

function loop() {
  requestAnimationFrame(loop);
  update();
}

function update() {
  var delta = clock.getDelta();
  if (mixer) mixer.update(delta);
  renderer.render(scene, camera);
  camera.lookAt(scene.position);
}

function addLight() {
  var ambientLight = new THREE.AmbientLight(0xffffff);
  ambientLight.intensity = 2;
  scene.add(ambientLight);
}

function initVariable() {
  // 创建摄像机
  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    30,
    10000
  );
  camera.position.z = 500;
  // 初始化场景
  scene = new THREE.Scene();

  group = new THREE.Group();
  scene.add(group);

  // 初始化renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
  });
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById("container").appendChild(renderer.domElement);

  // 监听窗口尺寸改变
  window.addEventListener("resize", onWindowResize, false);
}

function onWindowResize() {
  // 窗口尺寸改变
  try {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  } catch (error) {
    console.log(error);
  }
}

function loadModel(callback) {
  var loader = new THREE.GLTFLoader();
  loader.load(ASSETSURL + "02/scene.gltf", function (gltf) {
    role = gltf.scene;

    roleAnimations = gltf.animations;
    mixer = new THREE.AnimationMixer(gltf.scene);
    console.log(roleAnimations);
    actionAnimation(5);
    role.scale.set(30, 30, 30);
    role.position.set(300, 100, -300);
    role.rotation.set(0, (-Math.PI / 180) * 45, 0);
    group.add(role);
    callback && callback();
  });
}

function actionAnimation(index) {
  actionState = roleAnimations[index].name;
  mixer.clipAction(roleAnimations[index]).play();
}
